<script lang='tsx' name='ZoneTitle' setup>

type Props = {
    title: string,
    more?: boolean
}
const {
    title,
    more = false
} = defineProps<Props>()

// const emit = defineEmits<{
//   refresh?: []
// }>()
const emit = defineEmits<{
    (e: 'refresh'): void
}>()

let isLoading = ref<boolean>(false)

function handleRefresh() {
    if (isLoading.value) return;
    emit('refresh')
    isLoading.value = true
    setTimeout(() => {
        isLoading.value = false
    }, 1200)
}
</script>

<template>
    <div class='zone-title-container'>
        <div class="title-left" :style="{ cursor: more ? 'pointer' : '' }">
            <span m-r-6px>{{ title }}</span>
            <SvgIcon v-if="more" :h="20" :w="20" fill="#343f53" m-t-2px name="right-arrow"></SvgIcon>
        </div>
        <SvgIcon :class="{ 'icon-rotate': isLoading }" :h="20" :w="20" cursor-pointer
            hover="var(--navbar-icon-color-hover)" name="refresh" @click="handleRefresh"></SvgIcon>
    </div>
</template>

<style lang='scss' scoped>
.zone-title-container {
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    @include flex-item-center();
    justify-content: space-between;

    .title-left {
        @include flex-item-center();
    }
}

@keyframes refresh-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 应用动画 */
.icon-rotate {
    animation: refresh-rotate 0.6s linear 2;
    /* 2次旋转，每次1秒 */
}

/* 点击后清除动画 */
.icon-rotate.done {
    animation: none;
}
</style>
